import React from 'react';
import { Icon } from '@ss/mtd-react';
import { ErrorPageType } from '@src/utils';
import './ErrorPage.scss';

interface IProps {
  type: ErrorPageType;
}

/**
 * 错误信息提示组件: 用户信息不存在、页面不存在、没页面权限
 */
const ErrorPage = (props: IProps) => {
  const { type } = props;
  let errorPageJSX = null;
  switch (type) {
    // 用户信息不存在
    case ErrorPageType.userNotExists: {
      errorPageJSX = (
        <div className="error-page no-data">
          <div className="no-data-content">
            <Icon type="barschart-o" />
            <span className="no-data-content-tip">暂无账号信息，请稍等...</span>
          </div>
        </div>
      );
      break;
    }
    // 没有页面访问权限
    case ErrorPageType.pageNoPermission: {
      errorPageJSX = (
        <div className="error-page no-permission">
          <div className="no-permission-content">
            <Icon type="lock-o" />
            <span className="no-permission-content-tip">你无权访问</span>
          </div>
        </div>
      );
      break;
    }
    // 没有页面访问权限
    case ErrorPageType.pageNotFound: {
      errorPageJSX = (
        <div className="error-page no-found">
          <div className="no-found-content">
            <span className="no-found-content-icon">404</span>
            <span className="no-found-content-tip">页面不存在</span>
          </div>
        </div>
      );
      break;
    }
    default:
      return null;
  }

  return errorPageJSX;
};

export default ErrorPage;
